<template>
  <div id="app">
    <MyHeader></MyHeader>
    <router-view class="view" />
    <MyFooter></MyFooter>
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  components: {
    MyHeader,
    MyFooter,
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  .view {
    margin: 1rem 0;
  }
}

a {
  font-weight: bold;
  color: white;

  &.router-link-exact-active {
    color: purple;
  }
}
</style>
